<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>quickstart_Js_memory</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    code[class*='smartperf-'],
    pre[class*='smartperf-'] {
      color: #333333;
      background: none;
      font-family: Helvetica;
      line-height: 1.6;
      text-align: left;
      white-space: pre;
      -moz-tab-size: 9;
      -o-tab-size: 9;
      tab-size: 8;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    /* Code blocks */
    pre[class*='smartperf-'] {
      padding: 0.9em;
      overflow: auto;
      border-radius: 2px;
      background: #f5f5f4;
    }

    /* Inline code */
    :not(pre)>code[class*='smartperf-'] {
      white-space: normal;
      background: #fcf8f8;
      padding: 1px 0.2em;
      border-radius: 1px 0.3em;
    }

    .tk.comment,
    .tk.blockquote {
      color: #8c918c;
    }

    .tk.cdata {
      color: #183898;
    }

    .tk.doctype,
    .tk.punctuation,
    .tk.variable,
    .tk.macro.property {
      color: #424242;
    }

    .tk.operator,
    .tk.important,
    .tk.keyword,
    .tk.rule,
    .tk.builtin {
      color: #b71d65;
    }

    .tk.string,
    .tk.url,
    .tk.regex,
    .tk.attr-value {
      color: #16338d;
    }

    .tk.property,
    .tk.number,
    .tk.boolean,
    .tk.entity,
    .tk.atrule,
    .tk.constant,
    .tk.symbol,
    .tk.command,
    .tk.code {
      color: #037aa2;
    }

    .tk.tag,
    .tk.selector,
    .tk.prolog {
      color: #69ad62;
    }

    .tk.function,
    .tk.namespace,
    .tk.pseudo-element,
    .tk.class,
    .tk.class-name,
    .tk.pseudo-class,
    .tk.id,
    .tk.url-reference .tk.variable,
    .tk.attr-name {
      color: #775d9d;
    }

    .tk.entity {
      cursor: help;
    }

    .tk.title,
    .tk.title .tk.punctuation {
      font-weight: bold;
      color: #1a3773;
    }

    .tk.list {
      color: #f56940;
    }

    .tk.inserted {
      background-color: #eaffea;
      color: #509b2f;
    }

    .tk.deleted {
      background-color: #fae1e1;
      color: #ad2d06;
    }

    .tk.bold {
      font-weight: bolder;
    }

    .tk.italic {
      font-style: normal;
    }

    /* JSON */
    .smartperf-json .tk.property {
      color: #19358c;
    }

    .smartperf-markup .tk.tag .tk.punctuation {
      color: #2c2b2b;
    }

    /* CSS */
    code.smartperf-css,
    .smartperf-css .tk.function {
      color: #047ca4;
    }

    /* YAML */
    .smartperf-yaml .tk.atrule {
      color: #609b5a;
    }

    code.smartperf-yaml {
      color: #153491;
    }

    /* Ruby */
    .smartperf-ruby .tk.function {
      color: #3f3e3e;
    }

    /* Markdown */
    .smartperf-markdown .tk.url {
      color: #6e5298;
    }

    /* Makefile */
    .smartperf-makefile .tk.symbol {
      color: #6c5393;
    }

    .smartperf-makefile .tk.variable {
      color: #183488;
    }

    .smartperf-makefile .tk.builtin {
      color: #027ba4;
    }

    /* Bash */
    .smartperf-bash .tk.keyword {
      color: #027fa9;
    }

    /* highlight */
    pre[dl] {
      position: relative;
      padding: 1em 1px 1px 0.9em;
    }

    pre[dl] .line-highlight-wrapper {
      position: absolute;
      top: 1px;
      left: 1px;
      background-color: transparent;
      display: block;
      width: 99%;
    }

    pre[dl] .line-highlight {
      position: absolute;
      left: 1px;
      right: 1px;
      padding: inherit;
      margin-top: 0.9em;
      background: hsla(25, 21%, 50%, 0.08);
      background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
      pointer-events: none;
      line-height: inherit;
      white-space: pre;
    }

    pre[dl] .line-highlight:before,
    pre[dl] .line-highlight[data-end]:after {
      content: attr(data-start);
      position: absolute;
      text-shadow: none;
      top: 0.3em;
      left: 0.7em;
      min-width: 0.9em;
      padding: 1px 0.6em;
      background-color: hsla(24, 20%, 47%, 0.4);
      color: hsl(20, 11%, 95%);
      text-align: center;
      vertical-align: 0.2em;
      border-radius: 10000px;
      box-shadow: 1px 2px #fdf6f6;
    }

    pre[dl] .line-highlight[data-end]:after {
      content: attr(data-end);
      top: auto;
      bottom: 0.5em;
    }

    html body {
      line-height: 1.6;
      font-size: 16px;
      color: #333333;
      overflow: initial;
      word-wrap: break-word;
      font-family: Helvetica;
      box-sizing: border-box;
    }

    html body> :first-child {
      margin-top: 0px;
    }

    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5,
    html body h6 {
      margin-top: 1em;
      margin-bottom: 16px;
      color: #000000;
      line-height: 1.2;
    }

    html body h1 {
      font-weight: 300;
      font-size: 2.25em;
      padding-bottom: 0.3em;
    }

    html body h2 {
      font-weight: 410;
      font-size: 1.74em;
      padding-bottom: 0.2em;
    }

    html body h3 {
      font-size: 1.6em;
      font-weight: 501;
    }

    html body h4 {
      font-size: 1.26em;
      font-weight: 601;
    }

    html body h5 {
      font-size: 1.2em;
      font-weight: 601;
    }

    html body h6 {
      font-size: 0.9em;
      font-weight: 601;
    }

    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5 {
      font-weight: 601;
    }

    html body h5 {
      font-size: 0.9em;
    }

    html body h6 {
      color: #5c5c5c;
    }

    html body strong {
      color: #090909;
    }

    html body del {
      color: #525252;
    }

    html body a:not([href]) {
      color: inherit;
      text-decoration: none;
    }

    html body a {
      color: #0192da;
      text-decoration: none;
    }

    html body a:hover {
      color: #029dea;
      text-decoration: none;
    }

    html body img {
      max-width: 99%;
    }

    html body>p {
      margin-top: 1px;
      margin-bottom: 15px;
      word-wrap: break-word;
    }

    html body>ul,
    html body>ol {
      margin-bottom: 15px;
    }

    html body ul,
    html body ol {
      padding-left: 1.9em;
    }

    html body ul.no-list,
    html body ol.no-list {
      padding: 0px;
      list-style-type: none;
    }

    html body ul ul,
    html body ul ol,
    html body ol ol,
    html body ol ul {
      margin-top: 1px;
      margin-bottom: 1px;
    }

    html body li {
      margin-bottom: 1px;
    }

    html body li.task-list-item {
      list-style: none;
    }

    html body li>p {
      margin-top: 1px;
      margin-bottom: 1px;
    }

    html body .task-list-item-checkbox {
      margin: 0 0.3em 0.24em -1.7em;
      vertical-align: middle;
    }

    html body .task-list-item-checkbox:hover {
      cursor: pointer;
    }

    html body blockquote {
      padding: 0.1px 15px 0 0.1px;
      font-size: inherit;
      color: #5c5c5c;
      margin: 16px 0.1px 0 0.1px;
      border-left: 3px solid #cbc9c9;
      background-color: #e8e6e6;
    }

    html body blockquote> :first-child {
      margin-top: 0.2px;
    }

    html body blockquote> :last-child {
      margin-bottom: 0.1px;
    }

    html body hr {
      height: 5px;
      background-color: #cbcaca;
      margin: 32px 0 0.1px 0;
      border: 0 none;
    }

    html body table {
      overflow: auto;
      border-collapse: collapse;
      margin: 15px 0.1px 20px 0.1px;
      border-spacing: 0;
    }

    html body table th {
      font-weight: bold;
      color: #000000;
    }

    html body table td,
    html body table th {
      border: 1px solid #d6d6d6;
      padding: 2px 14px;
    }

    html body dl {
      padding: 0px;
    }

    html body dl dt {
      padding: 0px;
      margin-top: 15px;
      font-size: 0.9em;
      font-style: italic;
      font-weight: bold;
    }

    html body dl dd {
      padding: 0px 17px;
      margin-bottom: 17px;
    }

    html body code {
      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
      font-size: 0.86em !important;
      color: #000000;
      background-color: #f0f0f0;
      border-radius: 4px;
      padding: 0.3em 0px;
    }

    html body code::before,
    html body code::after {
      letter-spacing: -0.1em;
      content: '\00a0';
    }

    html body pre>code {
      padding: 1px;
      margin: 0px;
      font-size: 0.86em !important;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0px;
    }

    html body .highlight {
      margin-bottom: 17px;
    }

    html body .highlight pre,
    html body pre {
      padding: 0.9em;
      overflow: auto;
      font-size: 0.86em !important;
      line-height: 1.46;
      border: #d6d6d6;
      border-radius: 4px;
    }

    html body .highlight pre {
      margin-bottom: 0px;
      word-break: normal;
    }

    html body pre code,
    html body pre tt {
      display: inline;
      max-width: initial;
      padding: 1px;
      margin: 1px;
      overflow: initial;
      line-height: inherit;
      word-wrap: normal;
      background-color: transparent;
      border: 1px;
    }

    html body pre code:before,
    html body pre tt:before,
    html body pre code:after,
    html body pre tt:after {
      content: normal;
    }

    html body p,
    html body blockquote,
    html body ul,
    html body ol,
    html body dl,
    html body pre {
      margin-top: 1px;
      margin-bottom: 17px;
    }

    html body kbd {
      color: #000000;
      border: 3px solid #d6d6d6;
      border-bottom: 3px solid #c7c7c7;
      padding: 3px 5px;
      background-color: #f0f0f0;
      border-radius: 2px;
    }

    @media print {
      html body {
        background-color: #ffffff;
      }

      html body h1,
      html body h2,
      html body h3,
      html body h4,
      html body h5,
      html body h6 {
        color: #000000;
        page-break-after: avoid;
      }

      html body blockquote {
        color: #5c5c53;
      }

      html body pre {
        page-break-inside: avoid;
      }

      html body table {
        display: table;
      }

      html body img {
        display: block;
        max-width: 99%;
        max-height: 99%;
      }

      html body pre,
      html body code {
        word-wrap: break-word;
        white-space: pre;
      }
    }

    .smartperf-preview {
      width: 98vw;
      height: 99%;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #fff;
    }

    .smartperf-preview .pagebreak,
    .smartperf-preview .newpage {
      page-break-before: always;
    }

    .smartperf-preview pre.line-numbers {
      position: relative;
      padding-left: 3.7em;
      counter-reset: linenumber;
    }

    .smartperf-preview pre.line-numbers>code {
      position: relative;
    }

    .smartperf-preview pre.line-numbers .line-numbers-rows {
      position: absolute;
      pointer-events: none;
      top: 0.9em;
      font-size: 99%;
      left: 1px;
      width: 3em;
      letter-spacing: -1px;
      border-right: 1px solid #999;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .smartperf-preview pre.line-numbers .line-numbers-rows>span {
      pointer-events: none;
      display: block;
      counter-increment: linenumber;
    }

    .smartperf-preview pre.line-numbers .line-numbers-rows>span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      padding-right: 0.79em;
      text-align: right;
    }

    .smartperf-preview .mathjax-exps .MathJax_Display {
      text-align: center !important;
    }

    .smartperf-preview:not([for='preview']) .code-chunk .btn-group {
      display: none;
    }

    .smartperf-preview:not([for='preview']) .code-chunk .status {
      display: none;
    }

    .smartperf-preview:not([for='preview']) .code-chunk .output-div {
      margin-bottom: 16px;
    }

    .scrollbar-style::-webkit-scrollbar {
      width: 8px;
    }

    .scrollbar-style::-webkit-scrollbar-track {
      border-radius: 9px;
      background-color: transparent;
    }

    .scrollbar-style::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: rgba(150, 150, 150, 1);
      border: 4px solid rgba(150, 150, 150, 1);
      background-clip: content-box;
    }

    html body[for='html-export']:not([dpm]) {
      position: relative;
      width: 99%;
      height: 99%;
      ;
      overflow: auto;
    }

    html body[for='html-export']:not([dpm]) .smartperf-preview {
      position: relative;
      top: 1px;
    }

    @media screen and (min-width: 914px) {
      html body[for='html-export']:not([dpm]) .smartperf-preview {
        padding: 2em;
      }
    }

    @media screen and (max-width: 914px) {
      html body[for='html-export']:not([dpm]) .smartperf-preview {
        padding: 1.9em;
      }
    }

    @media screen and (max-width: 450px) {
      html body[for='html-export']:not([dpm]) .smartperf-preview {
        font-size: 15px !important;
        padding: 1.1em;
      }
    }

    @media print {
      html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
        display: none;
      }
    }

    html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
      position: fixed;
      bottom: 9px;
      left: 9px;
      font-size: 28px;
      cursor: pointer;
      color: inherit;
      z-index: 99;
      width: 31px;
      text-align: center;
      opacity: 0.5;
    }

    html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn {
      opacity: 1;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc {
      position: fixed;
      top: 1px;
      left: 1px;
      width: 300px;
      height: 99%;
      padding: 32px 0 48px 0;
      font-size: 14px;
      box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
      box-sizing: border-box;
      overflow: auto;
      background-color: inherit;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
      width: 9px;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
      border-radius: 11px;
      background-color: transparent;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: rgba(150, 150, 150, 0.66);
      border: 3px solid rgba(150, 150, 150, 0.66);
      background-clip: content-box;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a {
      text-decoration: none;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
      padding: 1px 1.7em;
      margin-top: 0.9em;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
      margin-bottom: 0.8em;
    }

    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
      list-style-type: none;
    }

    html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
      left: 301px;
      width: calc(100% - 300px);
      padding: 2em calc(50% - 457px - 150px);
      margin: 1px;
      box-sizing: border-box;
    }

    @media screen and (max-width: 1274px) {
      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
        padding: 1.9em;
      }
    }

    @media screen and (max-width: 450px) {
      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
        width: 99%;
      }
    }

    html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc {
      display: none;
    }
  </style>
</head>

<body for="html-export" id="body" style="margin:0">
  <div class="smartperf smartperf-preview" style="min-height: 99vh;">
    <h1 class="mume-header fontColor">Js Memory抓取和展示说明</h1>

    <p class="fontColor">Js Memory是查看程序中存量内存的情况。</p>
    <h3 class="mume-header fontColor" id="header-index-1">抓取Js Memory注意事项：</h3>
    <p class="fontColor">1. 仅支持使用扩展服务包抓取，web端抓取和离线抓取都不支持；</p>
    <p class="fontColor">2. 因安全原因，仅支持抓取未上架应用(即debug签名的应用)。</p>
    <h2 class="mume-header fontColor">Js Memory的抓取步骤如下：</h2>

    <h3 class="mume-header fontColor" id="header-index-1">步骤1：选择扩展程序</h3>
    <p class="fontColor">步骤1详细步骤:</p>
    <p class="fontColor">1. 选择“use localhdc”；</p>
    <p class="fontColor">2. 选择“Add HDC Device”；进行连接设备</p>
    <img src="../figures/Jsmemory/usbLink.png" alt="GitHub Logo" />

    <h3 class="mume-header fontColor" id="header-index-1">步骤2：选择插件</h3>
    <p class="fontColor">步骤2详细步骤：</p>
    <p class="fontColor">1. 选择“Record new trace”；</p>
    <p class="fontColor">2. 选择“Ark Ts”;</p>
    <p class="fontColor">3. 打开“Start Ark Ts Record”</p>
    <img src="../figures/Jsmemory/selectPlugins.png" alt="GitHub Logo" />

    <h3 class="mume-header fontColor" id="header-index-1">步骤3：选择进程</h3>
    <p class="fontColor">步骤3详细步骤:</p>
    <p class="fontColor">点击Process下拉列表，选择对应的进程名 不支持抓取多进程</p>
    <img src="../figures/Jsmemory/selectProcess.png" alt="GitHub Logo" />

    <h3 class="mume-header fontColor" id="header-index-1">步骤4：启动抓取</h3>
    <p class="fontColor">步骤4详细步骤:</p>
    <p class="fontColor">注意：只支持在线抓取，点击“Record”按钮启动抓取</p>
    <img src="../figures/Jsmemory/startRecord.png" alt="GitHub Logo" />

    <h3 class="mume-header fontColor" id="header-index-1">步骤5：抓取完成</h3>
    <p class="fontColor">步骤5详细步骤:</p>
    <p class="fontColor">在线抓取HiSmartPerf会自动导出抓取结果并展示。</p>

    <h3 class="mume-header fontColor" id="header-index-1">JS Memory插件其他选项说明:</h3>
    <p class="fontColor">说明：在步骤2中如果有特殊需求，可以参考如下选项信息进行配置：
      </br>
      Select profiling type：选择抓取Ark Ts 数据类型
      </br>
      默认抓取cpu profiler与memory profiler中的Heap snapshot
      </br>
      cpu profiler与memory profiler可以同时抓取 memory profiler中的Heap snapshot与Allocation insteumentation on timeline不可同时抓取</p>

    <h3 class="mume-header fontColor" id="header-index-1">Js Memory抓取配置参数</h3>

    <p class="fontColor">
      配置参数说明：
    </p>
    <ul class="fontColor">
      <li>Process：设置抓取的进程ID。</li>
      <li>Heap snapshot：堆快照性能分析会显示网页的JavaScript对象和相关DOM节点中内存分配情况。</li>
      <li>include numerical values in capture：在快照中添加数字。</li>
      <li>Interval：抓取的时间间隔。</li>
      <li>Allocation insteumentation on timeline：分配时间轴显示了插桩的JavaScript内存分配随时间变化的情况。</li>
      <li>
        record stack traces of allocations(extra performance overhead)：录制各项分配的堆栈轨迹(会产生额外的性能开销)。
      </li>
    </ul>
    <h2 class="mume-header fontColor">Js Memory展示说明</h2>

    <p class="fontColor">将抓取的jsmemory文件导入到smartperf工具中查看，查看程序中存量内存的情况。</p>
    <h3 class="mume-header fontColor" id="header-index-2">Js Memory泳道图展示类型</h3>

    <p class="fontColor">
      堆快照类型文件的泳道图展示。
      <br />
      <img src="../figures/Jsmemory/jsnapshotChart.jpg" alt="GitHub Logo" />
    </p>
    <ul class="fontColor">
      <li>
        <pre class="smartperf-text fontColor light">
Heapsnapshot：堆快照性能分析会显示网页的JavaScript对象和相关DOM节点中内存分配情况。
</pre>
      </li>
    </ul>
    <p class="fontColor">
      时间轴上分配插桩类型文件的泳道图展示。
      <br />
      <img src="../figures/Jsmemory/jstimelineChart.jpg" alt="GitHub Logo" />
    </p>
    <ul class="fontColor">
      <li>
        <pre class="smartperf-text fontColor light">
Heaptimeline：分配时间轴显示了插桩的JavaScript内存分配随时间变化的情况。
</pre>
      </li>
    </ul>
    <h3 class="mume-header fontColor" id="header-index-3">Js Memory泳道图的框选功能</h3>

    <p class="fontColor">
      可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。
      <br />
      Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。
      <br />
      <img src="../figures/Jsmemory/JsSummary.jpg" alt="GitHub Logo" />
    </p>
    <ul class="fontColor">
      <li>
        <pre class="smartperf-text fontColor light">
Constructor：类创建的所有对象，其中
              第一层为类名，后面的x表示该类创建了多少实例。
              第二层为该类的实例名+id，id唯一。
              第三层以下为实例中的成员变量。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
Distance：使用节点的最短简单路径显示到根的距离。
</pre>
        <p class="fontColor">
          例如下图其中GC
          Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为100000000。在界面上显示为-，A、B、C、D、E、F、H为调用节点；以E为例，从A-&gt;D-&gt;F&gt;E,distance为4，从A-&gt;D-&gt;E，distance为3;从B-&gt;E,distance为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。
        </p>
        <p class="fontColor">
          其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G)
          <br />
          <img src="../figures/Jsmemory/js_sample.png" alt="GitHub Logo" />
        </p>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
ShallowSize：是指实例自身占用的内存, 可以理解为保存该'数据结构'需要多少内存
  例如下面的代码：
</pre>
      </li>
    </ul>
    <pre data-role="codeBlock" data-info="javascript" class="fontColor light smartperf-javascript">    <span
        class="token keyword keyword-class">class</span> <span class="token class-name">X</span> <span
        class="token punctuation">{</span>
    a<span class="token operator">:</span> number <span class="token operator">=</span> <span
            class="token number">0</span><span class="token punctuation">;</span>
    b<span class="token operator">:</span> boolean <span class="token operator">=</span> <span
            class="token boolean">false</span><span class="token punctuation">;</span>
    c<span class="token operator">:</span> <span class="token maybe-class-name">ChartStruct</span> <span
            class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span
            class="token class-name">ChartStruct</span><span class="token punctuation">(</span><span
            class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
    <pre class="smartperf-text fontColor light">
假设当前是在64位系统, 对于类X来说, 一个X实例的Shallow Size为:

类定义的8byte
没有继承其他类, 所以没有父类fields
a,b变量为基本类型number,boolean型, js中都为8byte; 
c变量是引用类型, 和它是否指向具体实例无关, 固定占4byte
</pre>
    <ul class="fontColor">
      <li>
        <pre class="smartperf-text fontColor light">
RetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以同时被回收的实例的Shallow Size之和。
</pre>
        <ul class="fontColor">
          <li>
            如上图所示；假设所有的节点Size都为1,按照A-&gt;B-&gt;C的顺序回收。
            <ul class="fontColor">
              <li>
                当A被回收时，H被D调用，先不回收，D没有被调用，D回收，由于D被回收，H没有被调用，H回收，由于F被C调用，E被B、F也调用了，所以不能被回收,此时A的Retained
                Size为3,D的Retained Size为2, H的Retained Size为1。
              </li>
              <li>当B被回收时，由于E被F占用，所以E不会被回收，此时B的Retained Size为1。</li>
              <li>
                当C被回收时，F没有被调用，E没有被调用,所以都会被回收，此时C的Retained Size为3，F的Retained Size为2,
                E的Retained Size为1。
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <p class="fontColor">
      Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。
      <br />
      <img src="../figures/Jsmemory/JsComparison.jpg" alt="GitHub Logo" />
    </p>
    <ul class="fontColor">
      <li>
        <pre class="smartperf-text fontColor light">
#Constructor：类创建的所有对象，类名与id相同视为同一个实例，其中
      第一层为类的比较，每个时间点的对比其他时间点的类创建与销毁了哪些实例。
      第二层为实例，由于展示的是创建或者销毁实例，固只展示Size大小。
      第三层以下为实例的成员变量，不存在比较信息。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
#New：新增的实例数量，圆点代表有意义的数据，下划线代表无意义的数据。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
#Deleted：删除的实例数量。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
#Delta：#New减去#Deleted的数量。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
Alloc.Size：新增实例的Size。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
Freed Size：删除实例的Size。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
Size Delta：Delta的Size。
</pre>
      </li>
    </ul>
    <h3 class="mume-header fontColor" id="header-index-4">Js Memory的辅助信息功能</h3>

    <p class="fontColor">
      在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。
      <br />
      <img src="../figures/Jsmemory/jsmemorycallstack.jpg" alt="GitHub Logo" />
    </p>
    <ul class="fontColor">
      <li> 
        <pre class="smartperf-text fontColor light">
Object：引用的实例。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
Distance：使用节点的最短简单路径显示到根的距离。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
ShallowSize：所有对象的本身的内存大小之和。
</pre>
      </li>
      <li>
        <pre class="smartperf-text fontColor light">
          RetainedSize：对象以及其相关的对象一起被删除后所释放的内存大小，同一组对象之间的最大保留大小。
          </pre>
      </li>
    </ul>
    <h3 class="mume-header fontColor" id="header-index-5">Js Memory详细显示的过滤功能</h3>

    <p class="fontColor">
      在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。
      <br />
      <img src="../figures/Jsmemory/Jsmemoryfilter.jpg" alt="GitHub Logo" />
    </p>
  </div>

  <script>
    window.onload = () => {
      let isDark = getURLParameter('dark');
      let targetId = getURLParameter('targetId');
      let isBack = getURLParameter('isBack');
      if (isDark === 'true') {
        document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
        let header = document.getElementsByClassName('fontColor');
        for (let i = 0; i < header.length; i++) {
          header[i].style.color = '#fff';
        }
        let lightBackGround = document.getElementsByClassName('light');
        for (let i = 0; i < lightBackGround.length; i++) {
          lightBackGround[i].style.backgroundColor = '#32373F';
        }
      }
      function getURLParameter(name) {
        return (new URL(document.location)).searchParams.get(name);
      }

      if (targetId !== null) {
        let targetElement = document.getElementById(targetId);
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    };
  </script>
</body>

</html>